<div>
    <h1 mat-dialog-title style="display:inline-block;cursor: move;" mat-dialog-draggable>{{'dlg.menuitem-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <div mat-dialog-content>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.menuitem-icon' | translate}}</span>
            <mat-select [(value)]="data.item.icon" style="width: 60px; height: 30px" #iconsel>
                <mat-select-trigger>
                    <mat-icon>{{iconsel.value}}</mat-icon>
                </mat-select-trigger>
                <mat-option [value]="'image'" (click)="imagefile.value = '';imagefile.click();">
                    {{'dlg.menuitem-image' | translate}}
                    <input #imagefile type="file" style="display: none;" (change)="onSetImage($event)" accept="image/png|jpg|svg" />
                </mat-option>
                <mat-option *ngFor="let icon of icons$ | async" [value]="icon" (click)="data.item.image = ''" style="display: inline-block !important;">
                    <mat-icon class="">{{ icon }}</mat-icon>
                </mat-option>
            </mat-select>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.menuitem-text' | translate}}</span>
            <input [(ngModel)]="data.item.text" type="text" style="width: 300px">
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.menuitem-view' | translate}}</span>
            <mat-select [(value)]="data.item.view" style="width: 300px">
                <mat-option *ngFor="let view of data.views" [value]="view.id">
                    {{ view.name }}
                </mat-option>
                <mat-option [value]="linkAddress">[{{'dlg.menuitem-link' | translate}}]</mat-option>
                <mat-option [value]="linkAlarms">[{{'dlg.menuitem-alarms' | translate}}]</mat-option>
                <!-- <mat-option [value]="events">[{{'dlg.menuitem-events' | translate}}]</mat-option> -->
            </mat-select>
        </div>
        <div *ngIf="data.item.view === '[link]'" class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.menuitem-address' | translate}}</span>
            <input [(ngModel)]="data.item.link" type="text" style="width: 300px">
        </div>    
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.useraccess-groups' | translate}}</span>
            <sel-options #seloptions [selected]="selectedGroups" [options]="groups"></sel-options>
        </div>   
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>